<template>
   <div class="tmpl">
       <nav-bar title="商品评论"></nav-bar>
       <div class="photo-title">
           <p>标题</p>
           <span>发起日期： </span>
           <span>次浏览</span>
           <span>分类：</span>
       </div>
       <ul class="mui-table-view mui-grid-view mui-grid-9">
           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
           </li>
       </ul>
       <div class="photo-desc">
           <p>信息</p>
       </div>

       <div class="photo-bottom">
           <ul>
               <li class="photo-comment">
                   <div>
                       <span>提交评论</span>
                       <span><a>返回</a></span>
                   </div>
               </li>
               <li class="txt-comment">
                   <textarea></textarea></textarea>
               </li>
               <li>
                   <but>发表评论按钮</but>
               </li>
               <li class="photo-comment">
                   <div>
                       <span>评论列表</span>
                       <span>44条评论</span>
                   </div>
               </li>
           </ul>
           <ul class="comment-list">
               <li>
                   评论
               </li>
           </ul>
           <button>加载更多</button>
       </div>
   </div>
</template>

<script>
   export default {
       data () {
       return {
       }
   },
   created(){
       let id = this.$route.query.id;
       console.log(id)
    
   },
   methods: {
   },
 }

</script>

<style scoped>
    li {
        list-style: none;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    .photo-title {
        overflow: hidden;
        margin-top: 10px;
    }
    .photo-title,.photo-desc{
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }
    .photo-title p{
        color: #13C2F7;
        font-size: 20px;
        font-weight: bold;
    }
    .photo-title span{
        margin-right: 20px;
    }
    .mui-table-view.mui-grid-view.mui-grid-9 {
        background-color: white;
        border: 0;
    }
    .mui-table-view.mui-grid-view.mui-grid-9 li {
        border: 0;
    }
    .photo-desc {
        margin-top: 10px;
    }
    .photo-desc p {
        font-size: 18px;
    }
    .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
        /* padding: 2 2; */
        padding: 0;
        margin-left: -8px;
    }
    .preview-img {
        height:100px;
        width: 100%;
    }
    .photo-comment > div span:nth-child(1){
        float: left;
        font-weight: bold;
        margin-left: 5px;
    }
    .photo-comment > div span:nth-child(2){
        float: right;
    }
    .photo-comment {
        height: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        line-height: 30px;
        margin-bottom: 5px;
    }
    .txt-comment{
        padding: 5 5;
    }
    .txt-comment textarea{
        margin-bottom: 5px;
    }
    .comment-list li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }
    li {
        list-style: none;
    }
    ul{
        margin:0;
        padding: 0;
    }
</style>
